<template>
  <div class="data-statistics v-flex" style="overflow: scroll">
    <div class="header-box">
      <div class="title-box">
        <span class="title">{{ device.deviceName }}</span>
      </div>
      <span class="dmc-sub-title dm-pl8"> 设备标识: {{ device.deviceIdentification }}</span>
      <span class="dmc-sub-title dm-pl8 dmc-dev-amount"> 设备状态: {{ device.deviceStatusName }}</span>
      <span class="dmc-sub-title dm-pl8 dmc-dev-amount"> 连接状态: {{ device.connectStatusName }}</span>
      <div class="back-box" @click="goBack">
        <img src="@/assets/images/c6/back.png" class="icon">
        <span class="back">返回</span>
      </div>
    </div>
    <div class="container-box">
      <div class="title-box">
        <div class="content-header-vertical-bar" />
        <span class="title">基本信息</span>
      </div>
      <div class="context-box">
        <el-form label-width="120px">
          <el-row class="row">
            <el-col :span="10">
              <el-form-item label="设备标识：">{{ device.deviceIdentification }}</el-form-item>
              <el-form-item label="产品标识：">{{ device.product.model }}</el-form-item>
              <el-form-item label="客户端标识：">{{ device.clientId }}</el-form-item>

            </el-col>
            <el-col :span="10">
              <el-form-item label="设备类型：">{{ device.deviceTypeName }}</el-form-item>
              <el-form-item label="产品名称：">{{ device.product.productName }}</el-form-item>
              <el-form-item label="用户名：">{{ device.userName }}</el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="协议类型：">{{ device.protocolType }}</el-form-item>
              <el-form-item label="数据格式：">{{ device.product.dataFormat }}</el-form-item>
              <el-form-item label="密码：">{{ device.password }}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="edit-btn-box">
        <el-button
          icon="el-icon-edit"
          size="mini"
          type="danger"
          @click="updateDeviceInfo">
          更新设备信息
        </el-button>
      </div>
    </div>
    <div class="tabs-conainer-box">
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="设备位置" name="first">
          <div v-if="activeName==='first'" class="map-container">
            <div class="edit-btn-box">
              <el-button
                icon="el-icon-edit"
                size="mini"
                type="danger"
                @click="updateDeviceLocation">
                更新地理位置信息
              </el-button>
            </div>
            <map-view ref="mapView" :device-location="device.deviceLocation" class="map" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="Topic列表" name="second">
          <div class="map-container">
            <topic-list class="topic-table" :device-identification="deviceIdentification" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <edit-device :dialog="updateDialog" />
    <edit-device-location :dialog="updateLocationDialog" />
  </div>
</template>

<script>
import { getDeviceById, updateDevice, addDevice, deleteDevice, validationFindOneByDeviceIdentification, validationFindOneByClientId } from '@/api/cms/winglinks/device'
import { getDeviceInfoById, updateDeviceInfo } from '@/api/cms/winglinks/deviceinfo'
import editDevice from './editDevice'
import mapView from './mapView'
import editDeviceLocation from './editDeviceLocation'
import topicList from './topicList'
export default {
  name: 'DeviceDetail',
  components: { editDevice, mapView, editDeviceLocation, topicList },
  data() {
    return {
      // 设备id
      deviceId: undefined,
      deviceIdentification: undefined,
      // 设备信息
      device: {
        deviceIdentification: null,
        clientId: null,
        userName: null,
        password: null,
        protocolType: null,
        deviceTypeName: null,
        product: {
          model: null,
          productName: null
        },
        deviceLocation: {}
      },
      // 修改设备弹窗
      updateDialog: {
        visible: false,
        deviceId: undefined
      },
      // 修改地理位置彈窗
      updateLocationDialog: {
        visible: false,
        deviceIdentification: undefined
      },
      activeName: 'first'
    }
  },
  watch: {
    '$route.query'() {
      console.log('watch', this.$route.query)
      const deviceId = this.$route.query.id
      const deviceIdentification = this.$route.query.deviceIdentification
      if (deviceIdentification) {
        this.deviceIdentification = deviceIdentification
      }
      if (deviceId) {
        this.deviceId = deviceId
        this.getDeviceDetail()
      }
    }
  },
  mounted() {
    const deviceType = this.$route.query.deviceType
    if (deviceType) {
      this.deviceType = deviceType
    }
    const deviceId = this.$route.query.id
    const deviceIdentification = this.$route.query.deviceIdentification
    if (deviceIdentification) {
      this.deviceIdentification = deviceIdentification
    }
    if (deviceId) {
      this.deviceId = deviceId
      this.getDeviceDetail()
    }
  },
  activated() {
    const deviceId = this.$route.query.id
    if (deviceId) {
      this.deviceId = deviceId
      this.getDeviceDetail()
    }
  },
  methods: {
    // 获取设备详细信息
    getDeviceDetail() {
      getDeviceById(this.deviceId).then(res => {
        this.device = res.data
        this.updateDialog.deviceId = res.data.id
        this.updateLocationDialog.deviceIdentification = res.data.deviceIdentification
      })
    },
    // 回退上一个页面
    goBack() {
      this.$router.back()
    },
    // 跳转设备信息修改
    updateDeviceInfo() {
      this.updateDialog.deviceId = this.deviceId
      this.updateDialog.visible = true
    },
    // 跳转设备地理位置修改
    updateDeviceLocation() {
      this.updateLocationDialog.deviceIdentification = this.device.deviceIdentification
      this.updateLocationDialog.visible = true
    }
  }
}
</script>

<style lang="scss" scoped>
  .data-statistics{
    background-color: #F0F2F5;
  }
  .title-box{
    display: flex;
    flex-direction: row;
    height: 26px;
    align-items: center;
    margin-bottom: 12px;
    .content-header-vertical-bar{
      width: 7px;
      height: 26px;
      background: #409eff;
      border-radius: 4px;
      margin-right: 10px;
    }
    .title{
      margin-right:7px;
      font-weight: 700;
      font-size: 18px;
    }
  }
  .header-box{
    background-color: #ffffff;
    margin: 15px;
    padding: 15px;
    border-radius: 5px;
    position: relative;
    .dmc-sub-title {
      font-size: 16px;
      color: #8a8e99;
    }
    .dm-font16 {
      margin-left: .5rem;
      padding-left: .5rem;
      border-left: 1px solid #dfe1e6;
    }
    .dm-bold {
      font-weight: 700;
    }
    .dm-p18 {
      padding-left: .5rem !important;
    }
    .dmc-dev-amount {
      margin-left: .5rem;
      padding-left: .5rem;
      border-left: 1px solid #dfe1e6;
    }
    .back-box{
      align-items: center;
      display: flex;
      flex-direction: row;
      position: absolute;
      right: 20px;
      top: 20px;
      .icon{
        margin-right: 5px;
        height: 25px;
        width: auto;
      }
      .back{
        font-size: 16px;
        color: #409EFF;
      }
    }
  }
  .container-box{
    background-color: #ffffff;
    margin: 15px;
    padding: 15px;
    border-radius: 5px;
    position: relative;
    .row{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }
    .edit-btn-box{
      position: absolute;
      top: 18px;
      right: 18px;
    }
  }
  .tabs-conainer-box{
    background-color: #ffffff;
    margin: 15px;
    padding: 15px;
    border-radius: 5px;
    font-weight: 700;
    /deep/.el-tabs__item{
      font-size:18px !important;
      font-weight: 700;
    }
  }
  .map-container{
    .edit-btn-box{
      margin-bottom: 10px;
    }
    .map{
      width: 100%;
      height: 500px;
    }
  }
  .map1{
    height: 400px;
    width: 400px;
    padding: 10px 30px;
  }
</style>
